<template>
	<view class="charts-box">
		<Head></Head>
		<view class="box-undata">
			<!-- <qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true" :onzoom="true"
				tooltipFormat="tooltipDemo1" /> -->
			<l-echart ref="chart" @finished="init"></l-echart>
			<view class="box-bottom">
				<view class="box-diks">
					<view class="xian"></view>
					<text>体温(口)</text>
				</view>
				<text class="bottom-title">月-日 时:分</text>
			</view>
		</view>
		<view class="btm">
			<u-button type="primary" class="btn2 " text="标准体温图" color="#7ADFCA" @tap="btnClits"></u-button>
			<u-button type="primary" class="btn3 btn-title" text="退出" color="#FF6E91" @tap="cancel"></u-button>
		</view>
	</view>
</template>

<script>
	import Head from '../../components/html/head.vue'
	import $moment from '../../components/js/day.js'
	import {
		EMR_Nusing_GetListOfPHItem
	} from '../../api/user.js'
	import {
		mapMutations,
		mapState
	} from "vuex";
	// 按需引入 开始
	import * as echarts from 'echarts/core';
	import {
		LineChart,
		BarChart
	} from 'echarts/charts';
	import {
		TitleComponent,
		TooltipComponent,
		GridComponent,
		DatasetComponent,
		TransformComponent,
		LegendComponent
	} from 'echarts/components';
	// 标签自动布局，全局过渡动画等特性
	import {
		LabelLayout,
		UniversalTransition
	} from 'echarts/features';
	// 引入 Canvas 渲染器，注意引入 CanvasRenderer 是必须的一步
	import {
		CanvasRenderer
	} from 'echarts/renderers';

	// 注册必须的组件
	echarts.use([
		LegendComponent,
		TitleComponent,
		TooltipComponent,
		GridComponent,
		DatasetComponent,
		TransformComponent,
		LineChart,
		BarChart,
		LabelLayout,
		UniversalTransition,
		CanvasRenderer
	]);
	export default {
		components: {
			Head
		},
		data() {
			return {

				option: {
					title: {
						text: '体温',
						textStyle: {
							color: '#C2C2C2',
							fontWeight: '100',
							fontSize: 14
						},
						top: 20

					},
					grid: {
						left: '2%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						axisTick: {
							alignWithLabel: true
						},
						axisLabel: { //x轴文字的配置
							textStyle: {
								color: "red", //x轴内容文字颜色
							},
						},
						axisLine: { //y轴线的配置
							show: true, //是否展示
							lineStyle: {
								color: "#C2C2C2",
								width: 1, //x轴线的宽度
								// type: "solid" //x轴线为实线
							},
						},
						data: []
					},
					yAxis: {
						type: 'value',
						max: 43,
						min: 34,
						interval: 1,
						axisLabel: { //y轴文字的配置
							textStyle: {
								color: "red", //Y轴内容文字颜色
							},
						},
						axisLine: { //y轴线的配置
							show: true, //是否展示
							lineStyle: {
								color: "#C2C2C2", //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
								width: 1, //y轴线的宽度
								// type: "solid" //y轴线为实线
							},
						}
					},
					tooltip: {
						trigger: 'axis',
						formatter: '体温(口): {c}°C'
					},
					series: [{
						symbol: 'circle',
						data: [],
						type: 'line',
						smooth: true,
						lineStyle: {
							width: 1.5,
							shadowColor: 'rgba(0,0,0,0.3)',
							shadowBlur: 4,
							shadowOffsetY: 1,
						},
					}]
				},
				optinsObj: []
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'deleteObj', 'scanningArray'])
		},
	
		watch: {
			deleteObj: {
				// deep: true,
				handler(newval,oldval) {
					console.log(newval);
					if(newval.MRN !=oldval.MRN){
						this.getServerData()
					}
					
				},
			}
		},
		mounted() {
			this.getServerData();
		},
		methods: {
			init() {
				this.$refs.chart.init(echarts, chart => {
					chart.showLoading();
					chart.setOption(this.option);
					chart.hideLoading();
				});
			},
			btnClits() {
				uni.showToast({
					icon: "error",
					mask: true,
					title: ' 该功能还未上线！',
					duration: 5000,
				});
			},
			cancel() {
				uni.redirectTo({
					url: '../hospitallist/index'
				})
			},
			async getServerData() {
				try {
					uni.showToast({
						title: '加载中...', //显示的文字
						// duration: 5000, //显示多少时间，默认1500毫秒
						icon: "loading", //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
						mask: true
					})
					const user = uni.getStorageSync('userInfo')
					const obj = uni.getStorageSync('deleteObj')
					const data = {
						HosKind: user.hoscode,
						lmrn: obj.MRN,
						iseries: obj.SERIES,
						phvalue: '',
						phcode: '',
						sOperdept: user.HosKind,
						sOperJp: user.sPassword
					}
					const res = await this.$http.EMR_Nusing_GetListOfPHItem(data)
					if (res) {
						this.optinsObj = res.filter(item => {
							return item?.inputfield != ''
						});
						uni.hideToast();
						console.log(this.optinsObj, 'this.optinsObj');

					}

					//模拟从服务器获取数据时的延时
					// setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let falg = false
					if (this.optinsObj[0]?.result == '') {
						this.option.xAxis.data = [this.getYearMonth($moment().format("YYYY-MM-DD HH:mm:ss"))]
						this.option.series[0].data = []
						console.log(": " + this.option);
						this.$refs.chart.setOption(this.option, true)
						falg = true
						return
					}
					if (!falg) {
						let categories = [],
							vaule = [];
						this.optinsObj.map(item => {
							categories.push(this.getYearMonth(item.rcdtime.replace(/\//g, '-')))
							vaule.push(item?.inputfield.replace('/', ''))
						})
						this.option.xAxis.data = this.optinsObj.length == 0 ? [this.getYearMonth($moment()
							.format(
								"YYYY-MM-DD HH:mm:ss"))] : categories;
						console.log(vaule, 'vaulevaulevaulevaule');
						this.option.series[0].data = vaule
						this.$refs.chart.setOption(this.option, true)
						await uni.hideToast();
					}



					// }, 500);
				} catch (e) {
					//TODO handle the exception
				}
			},
			getYearMonth(date) {
				let timearr = date.replace(" ", ":").replace(/\:/g, "-").split("-");
				// let nian = timearr[0];
				let yue = timearr[1];
				let ri = timearr[2];
				let shi = timearr[3];
				let fen = timearr[4];
				// let miao = timearr[5];
				// console.log(nian,yue,ri,shi,fen,miao);
				return yue + '-' + ri + ' ' + shi + ':' + fen; // return 出来的数据是06-13 17:10
			}
		}
	};
</script>

<style scoped lang="scss">
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.box-undata {
			width: 100%;
			height: calc(100% - 200px);
		}
	}

	.box-bottom {
		display: flex;
		justify-content: space-between;
		padding: 0 15px;
		align-items: center;

		.box-diks {
			display: flex;
			align-items: center;

			text {
				font-size: 12px;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #0A13FF;
				line-height: 18px;
				margin-left: 5px;
			}

			.xian {
				width: 34px;
				height: 1px;
				background: #0A13FF;
				position: relative;

				&:before {
					content: " ";
					width: 7px;
					height: 7px;
					background: #0A13FF;
					position: absolute;
					border-radius: 50%;
					left: 13px;
					top: -3px;
				}
			}

		}

		.bottom-title {
			font-size: 12px;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			font-weight: 400;
			color: #C2C2C2;
			line-height: 18px;
		}

	}

	.btm {
		display: flex;
		align-items: center;
		padding: 0px 10px;
		position: absolute;
		bottom: 10px;
		left: 0;
		width: 95%;

		.u-reset-button ::v-deep .u-button__text {
			font-size: 18px !important;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 27px;
		}

		.btn2 {
			box-shadow: 0px 2px 6px 0px #6AC8B5;
			margin-right: 11px;
		}

		.btn3 {
			box-shadow: 0px 2px 6px 0px #ff6e91;
			letter-spacing: 14px;
			padding-left: 14px;
			width: 80%;
		}
	}
</style>
